<template>
  <div>
    <h2>Realtime DataStore</h2>
    <div>
      <label>First Name</label>
      <input v-model="firstname" @input="handleFirstNameUpdate()">
    </div>
    <div>
      <label>Last Name</label>
      <input v-model="lastname" @input="handleLastNameUpdate()">
    </div>
  </div>
</template>
<script>
  export default{
    props: ['ds'],
    data() {
      return {
        firstname: '',
        lastname: ''
      }
    },
    created() {
      this.record = this.ds.record.getRecord('test/johndoe')
      this.record.subscribe(values => {
        this.firstname = values.firstname
        this.lastname = values.lastname
      })
    },
    methods: {
      handleFirstNameUpdate() {
        this.record.set('firstname', this.firstname)
      },
      handleLastNameUpdate() {
        this.record.set('lastname', this.lastname)
      }
    }
  }
</script>
